<template>
  <div class="zuofa">
    <div class="madecaipu">
      做法
      <div class="madecaipu zuo1">1</div>
    </div>
    <div>
      <!-- 1 -->
      <div class="zuofaright cuofabottom">
        <span class="span1">批量上传步骤图</span>
        <span class="span2">按住 "Ctrl" 批量选择文件</span>
        <div class="inputflex">
          <input
            type="text"
            class="texttianjia"
            placeholder="点击添加菜谱步骤"
            v-model="zuofa1"
          />
          <div class="fileian" ref="filebox2" @click.stop="bumaopao2">
            <input type="file" class="fileianjia" ref="myfiles2" multiple />
          </div>
          <span class="sopan1">
            <img src="https://s.chuimg.com/pic/drag.png" >
            </span>
          <span class="sopan2">
            <img src="https://s.chuimg.com/pic/close.png" >
          </span>
          <div class="centerbox" ref="mycaipufengm2">
            <div class="xiaoshi">+ 菜谱封面</div>
            <div class="chicun xiaoshi">最佳尺寸：1280*1024</div>
          </div>
        </div>
      </div>

      <!-- 2 -->
      <div class="zuofaright">
        <div class="nuumber">2</div>
        <div class="inputflex">
          <input
            type="text"
            class="texttianjia"
            placeholder="点击添加菜谱步骤"
             v-model="zuofa2"
          />
          <div class="fileian" ref="filebox3" @click.stop="bumaopao3">
            <input type="file" class="fileianjia" ref="myfiles3" multiple />
          </div>
          <span class="sopan1">
             <img src="https://s.chuimg.com/pic/drag.png" >
          </span>
          <span class="sopan2">
            <img src="https://s.chuimg.com/pic/close.png" >
          </span>
          <div class="centerbox" ref="mycaipufengm3">
            <div class="xiaoshi">+ 菜谱封面</div>
            <div class="chicun xiaoshi">最佳尺寸：1280*1024</div>
          </div>
        </div>
      </div>
      <!-- 3 -->
      <div class="zuofaright">
        <div class="nuumber">3</div>
        <div class="inputflex">
          <input
            type="text"
            class="texttianjia"
            placeholder="点击添加菜谱步骤"
             v-model="zuofa3"
          />
          <div class="fileian" ref="filebox4" @click.stop="bumaopao4">
            <input type="file" class="fileianjia" ref="myfiles4" multiple />
          </div>
          <span class="sopan1">
            <img src="https://s.chuimg.com/pic/drag.png" >
          </span>
          <span class="sopan2">
             <img src="https://s.chuimg.com/pic/close.png" >
          </span>
          <div class="centerbox" ref="mycaipufengm4">
            <div class="xiaoshi">+ 菜谱封面</div>
            <div class="chicun xiaoshi">最佳尺寸：1280*1024</div>
          </div>
        </div>
      </div>
      <!-- 4 -->
      <div class="zuofaright">
        <div class="nuumber">4</div>
        <div class="inputflex">
          <input
            type="text"
            class="texttianjia"
            placeholder="点击添加菜谱步骤"
             v-model="zuofa4"
          />
          <div class="fileian" ref="filebox5" @click.stop="bumaopao5">
            <input type="file" class="fileianjia" ref="myfiles5" multiple />
          </div>
          <span class="sopan1">
             <img src="https://s.chuimg.com/pic/drag.png" >
          </span>
          <span class="sopan2">
             <img src="https://s.chuimg.com/pic/close.png" >
          </span>
          <div class="centerbox" ref="mycaipufengm5">
            <div class="xiaoshi">+ 菜谱封面</div>
            <div class="chicun xiaoshi">最佳尺寸：1280*1024</div>
          </div>
        </div>
      </div>
      <!-- 5 -->
      <div class="zuofaright">
        <div class="nuumber">5</div>
        <div class="inputflex">
          <input
            type="text"
            class="texttianjia"
            placeholder="点击添加菜谱步骤"
             v-model="zuofa5"
          />
          <div class="fileian" ref="filebox6" @click.stop="bumaopao6">
            <input type="file" class="fileianjia" ref="myfiles6" multiple />
          </div>
          <span class="sopan1">
             <img src="https://s.chuimg.com/pic/drag.png" >
          </span>
          <span class="sopan2">
            <img src="https://s.chuimg.com/pic/close.png" >
          </span>
          <div class="centerbox" ref="mycaipufengm6">
            <div class="xiaoshi">+ 菜谱封面</div>
            <div class="chicun xiaoshi">最佳尺寸：1280*1024</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filesdata2: "",
      filesdata3: "",
      filesdata4: "",
      filesdata5: "",
      filesdata6: "",
      zuofa1:"",
      zuofa2:"",
      zuofa3:"",
      zuofa4:"",
      zuofa5:"",
      
    };
  },
  watch:{
    zuofa1(){
      this.$emit("update:value", this.zuofa1);
    },
    zuofa2(){
      this.$emit("update:value1", this.zuofa2);
    },
    zuofa3(){
      this.$emit("update:value2", this.zuofa3);
    },
    zuofa4(){
      this.$emit("update:value3", this.zuofa4);
    },
    zuofa5(){
      this.$emit("update:value4", this.zuofa5);
    },


  },
  methods: {
    bumaopao2() {
      this.$refs.mycaipufengm2.style.display="none";
    },
    bumaopao3() {
      this.$refs.mycaipufengm3.style.display="none";
    },
    bumaopao4() {
      this.$refs.mycaipufengm4.style.display="none";
    },
    bumaopao5() {
      this.$refs.mycaipufengm5.style.display="none";
    },
    bumaopao6() {
      this.$refs.mycaipufengm6.style.display="none";
    },
  },
  components: {},
  mounted() {

    this.$refs.myfiles2.onchange = (e) => {
      console.log(e.target.files[0]);
       this.$emit("input",e.target.files[0])
      this.filesdata2 = window.URL.createObjectURL(e.target.files[0]);
      this.$refs.filebox2.style.backgroundImage = `url(${this.filesdata2})`;
      console.log(this.filesdata2);
    };
    this.$refs.myfiles3.onchange = (e) => {
      console.log(e.target.files[0]);
       this.$emit("update:value11", e.target.files[0])
      this.filesdata3 = window.URL.createObjectURL(e.target.files[0]);
      this.$refs.filebox3.style.backgroundImage = `url(${this.filesdata3})`;
    };
    this.$refs.myfiles4.onchange = (e) => {
      console.log(e.target.files[0]);
      this.$emit("update:value22", e.target.files[0])
      this.filesdata4 = window.URL.createObjectURL(e.target.files[0]);
      this.$refs.filebox4.style.backgroundImage = `url(${this.filesdata4})`;
    };
    this.$refs.myfiles5.onchange = (e) => {
      console.log(e.target.files[0]);
      this.$emit("update:value33", e.target.files[0])
      this.filesdata5 = window.URL.createObjectURL(e.target.files[0]);
      this.$refs.filebox5.style.backgroundImage = `url(${this.filesdata5})`;
    };
    this.$refs.myfiles6.onchange = (e) => {
      console.log(e.target.files[0]);
      this.$emit("update:value44", e.target.files[0])
      this.filesdata6 = window.URL.createObjectURL(e.target.files[0]);
      this.$refs.filebox6.style.backgroundImage = `url(${this.filesdata6})`;
    };
  },
};
</script>


<style lang="scss" scoped>
.zuofa {
  display: flex;
  justify-content: start;
}
.madecaipu {
  width: 80px;
  height: 40px;
  font-size: 29px;
  font-weight: bolder;
  line-height: 40px;
  margin-top: 20px;
  padding-left: 0;
  margin-bottom: 22px;
  color: #c0ae81;
}
.zuofaright {
  width: 748px;
  height: 250px;
  margin-top: 20px;
  // background-color: wheat;
}
.span1 {
  width: 80px;
  height: 40px;
  font-size: 17px;
  line-height: 40px;
  margin-right: 12px;
  margin-left: 44px;
  color: #df3915;
}
.sopan1 {
  width: 60px;
  height: 40px;
  margin-top: 82px;
  margin-left: 15px;
}
.sopan2 {
  width: 60px;
  height: 40px;
  margin-top: 82px;
}
.span2 {
  width: 80px;
  height: 40px;
  font-size: 17px;
  line-height: 40px;
  color: #9097ad;
}
.texttianjia {
  width: 295px;
  background-color: #ffffff;
  border: 0;
  height: 218px;
}
.texttianjia:hover {
  background-color: rgb(216, 245, 174);
  color: black;
}
.fileianjia {
  width: 295px;
  height: 218px;
  // background-color: salmon;
  opacity: 0;
}
.fileian {
  width: 295px;
  height: 218px;
  background-color: #f5f6f5;
  background-image: url("");
  background-size: 295px 218px;
  margin-left: 20px;
}
.fileian:hover {
  background-color: rgb(228, 224, 224);
  color: #909090;
}
.inputflex {
  display: flex;
  position: relative;
}
.centerbox {
  width: 130px;
  height: 40px;
  margin: 0 auto;
  position: absolute;
  top: 105px;
  left: 405px;
  display: block;
}
.chicun {
  width: 230px;
  margin-left: -20px;
  height: 40px;
}
.zuo1 {
  font-size: 33px;
}
.cuofabottom {
  margin-bottom: 60px;
}
.nuumber {
  font-size: 33px;
  width: 80px;
  height: 40px;
  font-weight: bolder;
  line-height: 40px;
  margin-top: 20px;
  // margin-bottom: 22px;
  position: relative;
  top: 8px;
  left: -82px;
  color: #c0ae81;
}

</style>
